﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>图片浏览</title>
    <script src="JS/jquery-1.11.1.min.js"></script>
    <script src="JS/jQueryRotate.js"></script>
    <script>
        var value = 0;
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            //if (r != null) return unescape(r[2]);
            if (r != null) return r[2];
            return null;
        }
        var path = GetQueryString("img");

        $(document).ready(function () {
            var w = (screen.availWidth + screen.availHeight) / 2;
            $("#img").attr('src', path);
            $("#img").attr('width', w);
            $("#img").rotate({
                bind:
                {
                    click: function () {
                        value += 90;
                        $(this).rotate({ animateTo: value });
                    }
                }
            });
        });
    </script>
    <style>
        body {
            overflow: hidden;
        }

        img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            transform: rotate(10deg);
        }
    </style>
</head>
<body>
    <img id="img" src="" usemap="#map" width="800" />
</body>
</html>
